/*
* 开发模式，功能：
* 1. css添加前缀
* 2. sass编译
* 3. es6编译
* 4. 只编译修改过的文件
* 5. 启动本地服务器
*/
const color = require('colors-cli/safe')
const error = color.red_bt
const warn = color.yellow
const notice = color.cyan
const tell = color.green_bt
const Config = require('./gulp.config.js')
const serverConfig = require('./server.config.js')
const gulp = require('gulp')
const postcss = require('gulp-postcss')
const autoprefixer = require('autoprefixer')
const sass = require('gulp-sass')
const babel = require('gulp-babel')
const browserSync = require('browser-sync').create()
const reload = browserSync.reload
const watch = require('gulp-watch')
const batch = require('gulp-batch')
const changed = require('gulp-changed')
const plumber = require('gulp-plumber')
const del = require('del')
const processors = [
  autoprefixer({browsers: ['last 20 version']})
]

function dev () {
  gulp.task('html:dev', function () {
    return gulp.src(Config.html.src, {base: Config.src})
      .pipe(plumber())
      .pipe(changed(Config.dist))
      .pipe(gulp.dest(Config.dist))
      .pipe(reload({stream: true}))
  })
  gulp.task('css:dev', function () {
    return gulp.src(Config.css.src, {base: Config.src})
      .pipe(plumber())
      .pipe(changed(Config.dist))
      .pipe(postcss(processors))
      .pipe(gulp.dest(Config.dist))
      .pipe(reload({stream: true}))
  })
  gulp.task('sass:dev', function () {
    return gulp.src(Config.sass.src, {base: Config.src})
      .pipe(plumber())
      .pipe(changed(Config.dist, {extension: '.css'}))
      .pipe(sass().on('error', sass.logError))
      .pipe(postcss(processors))
      .pipe(gulp.dest(Config.dist))
      .pipe(reload({stream: true}))
  })
  gulp.task('img:dev', function () {
    return gulp.src(Config.img.src, {base: Config.src})
      .pipe(plumber())
      .pipe(changed(Config.dist))
      .pipe(gulp.dest(Config.dist))
      .pipe(reload({stream: true}))
  })
  gulp.task('js:dev', function () {
    return gulp.src(Config.js.src, {base: Config.src})
      .pipe(plumber())
      .pipe(changed(Config.dist))
      .pipe(babel({
          presets: ['es2015']
        }))
      .pipe(gulp.dest(Config.dist))
      .pipe(reload({stream: true}))
  })
  gulp.task('libs:dev', function () {
    return gulp.src(Config.libs.src, {base: Config.src})
      .pipe(plumber())
      .pipe(gulp.dest(Config.dist))
      .pipe(reload({stream: true}))
  })
  gulp.task('dev', ['html:dev','css:dev','sass:dev','js:dev','img:dev','libs:dev'],function () {
    browserSync.init({
        server: {
            baseDir: Config.dist,
            index: 'index.html'
        },
        notify: false,
        browser: ""
    })
    doWatch()
  })
  gulp.task('origin-dev', ['html:dev','css:dev','sass:dev','js:dev','img:dev','libs:dev'], function (){
    browserSync.init({
        notify: false,
        browser: "",
        proxy: serverConfig.url,
        serveStatic: [Config.dist]
    })
    doWatch()
  })

  function doWatch () {
    watch(Config.html.src, batch(function (events, done) {
      gulp.start('html:dev', done);
    }))
    watch(Config.css.src, batch(function (events, done) {
      gulp.start('css:dev', done);
    }))
    watch(Config.sass.src, batch(function (events, done) {
      gulp.start('sass:dev', done);
    }))
    watch(Config.img.src, batch(function (events, done) {
      gulp.start('img:dev', done);
    }))
    watch(Config.js.src, batch(function (events, done) {
      gulp.start('js:dev', done);
    }))
    watch(Config.libs.src, batch(function (events, done) {
      gulp.start('libs:dev', done);
    }))
  }
}  

module.exports = dev